<template>
  <div class="app-container">
    <div class="top">
      <div class="info-item">
        <div>
          订单编号: {{ list.memberId }}
        </div>
        <div>
          运单编号: --
        </div>
        <div>
          下单时间: {{ list.createTime }}
        </div>
        <div>
          订单状态: 待取件
        </div>
      </div>
      <div class="info-xia">
        预计到达日期: {{ list.estimatedArrivalTime }}
      </div>
    </div>
    <el-collapse v-model="activeNames">
      <div class="centext">

        <el-collapse-item title="基本信息" name="1">
          <div class="centext-bt">
            <p class="centext-p"><i class="el-icon-map-location" /> 发货方</p>
            <span class="centext-right">发货人姓名: {{ list.senderName }}</span>
            <span>发货人电话: {{ list.senderPhone }}</span>
            <div class="centext-shou">
              <span class="centext-right">发货方地址: {{ list.senderAddress }}</span>
              <span>详细地址:  {{ list.senderAddress }}</span>
            </div>
          </div>
          <div class="centext-bt">
            <p class="centext-p"><i class="el-icon-help" /> 收货方</p>
            <span class="centext-right">收货人姓名: {{ list.receiverName }}</span>
            <span>收货人电话: {{ list.receiverPhone }}</span>
            <div class="centext-shou">
              <span class="centext-right">收货方地址: {{ list.receiverAddress }}</span>
              <span>详细地址:  {{ list.receiverAddress }}</span>
            </div>
          </div>
          <div class="centext-bt">
            <p class="centext-p"><i
              class="el-icon-wind-power"
            /> 距离: {{ list.distance }}</p>
            <span class="centext-right">备注: 暂无</span>
          </div>
        </el-collapse-item>

      </div>
      <div class="qujian">

        <el-collapse-item title="取件信息" name="2">
          <div class="info-item">
            <div class="info-item">
              <div>
                所在网点: 皇姑区营业厅
              </div>
            </div>
            <div class="info-item">
              <div>
                取件类型: {{ list.pickupType === 1 ? '网点自寄' : list.pickupType === 2 ?'上门取件':'无' }}
              </div>
            </div>
            <div class="info-item">
              <div>
                作业状态: 新任务
              </div>
            </div>
            <div class="info-item">
              <div>
                取件快递员: 皇姑区营业厅
              </div>
            </div>
          </div>
          <div class="info-xia1">
            <div class="info-xia">
              <div> 快递员电话: {{ list.senderPhone }}</div>
            </div>
            <div class="info-xia">
              <div> 预计取件时间: {{ list.estimatedStartTime }}</div>
            </div>
            <div class="info-xia">
              <div>取件完成时间 : {{ list.estimatedArrivalTime }}</div>
            </div>
            <div class="info-xia">
              <div />
            </div>
          </div>
        </el-collapse-item>

      </div>
      <div class="feiyong">

        <el-collapse-item title="费用信息" name="3">
          <div class="info-item">
            <div class="info-item">
              <div>
                运费: {{ list.amount }}
              </div>
            </div>
            <div class="info-item">
              <div>
                支付方式: {{ list.paymentMethod === 1 ? '预付' : list.paymentMethod === 2 ?'到付':'无' }}
              </div>
            </div>
            <div class="info-item">
              <div>
                付款状态: {{ list.paymentStatus === 1 ? '未付' : list.paymentStatus === 2 ?'已付':'无' }}
              </div>
            </div>
          </div>
        </el-collapse-item>

      </div>
      <div class="bt">

        <el-collapse-item title="货品信息" name="4">
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="id"
                label="序号"
                width="100"
              />
              <el-table-column
                prop="nameType"
                label="货品名称"
                width="300"
              />
              <el-table-column
                prop="name"
                label="货品类型"
                width="300"
              />
              <el-table-column
                prop="Weight"
                label="重量(千克)"
                width="300"
              />
              <el-table-column
                prop="Volume"
                label="体积(立方)"
                width="300"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="200"
              >
                <template>
                  <el-button type="text" size="medium">编辑</el-button>
                  <el-button type="text" size="medium">删除</el-button>
                </template>
              </el-table-column>

            </el-table></div>

        </el-collapse-item>
      </div>
    </el-collapse>
  </div>

</template>
<script>
import { getBusinessApi } from '@/api/businessManagement'
export default {
  data() {
    return {
      activeNames: ['1', '2', '3', '4'],
      tableData: [],
      pageprams: {
        pageSize: 6,
        page: 1,
        pages: 1
      },
      list: []
    }
  },
  created() {
    this.getBusinessApi()
  },
  methods: {
    async getBusinessApi() {
      const result = await getBusinessApi(this.$route.params.id)
      console.log(result)
      this.list = result
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  background-color: #f4f6f8;
}
.top {
  background-color: #ffffff;
  padding: 20px;
}
.qujian {
  background-color: #ffffff;
  padding: 20px;
}
.feiyong {
   background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
}
.bt {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
}
.info-item {
display: flex;
  justify-content: space-between;
}
.info-xia1 {
  display: flex;
  justify-content: space-between;
}
.info-xia {
  margin-top: 20px;
}
.centext {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 20px;
}
.centext-right {
  padding-left: 50px;
  padding-right: 120px;
}
.centext-p {
  padding-top: 30px;
}
.centext-shou {
  padding-top: 10px;
}
</style>
